<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="1-1"
    text-color="#fff"
    :collapse="isCollapse"
    :router="true"
  >
    <SideBarItem></SideBarItem>
  </el-menu>
</template>

<script>
import { reactive, toRefs } from 'vue'
import { useUserStore } from '@/stores/user.js'
import SideBarItem from '@/components/common/SideBarItem.vue'
export default {
  components: { SideBarItem },
  setup() {
    const state = reactive({
      count: 0,
    })
    const store = useUserStore()
    const { isCollapse } = toRefs(store)

    return {
      isCollapse,
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped>
/* 1.撑起菜单栏高度 */
.el-menu-vertical {
  //vh 是指 view height
  height: 100vh;
}
// 去掉白色的边框
.el-menu {
  --el-menu-border-color: #001529 !important;
}

.el-menu-item.is-active {
  color: #fff !important;
  background-color: #1890ff !important;
}
</style>
